<template>
    <div class="com-container" style="fontSize:12px">
        <div class="com-chart com-charts" ref="echarts" style="z-index:555;position: relative;"></div>
    </div>
</template>

<script>
export default {
    props: ["commonData"],
    data() {
        return {
            chartInstance: null,
            allData: null, // 服务器返回的数据
            xDatas: null
        };
    },
    watch: {
        commonData: {
            handler(newVal) {
                if (newVal) {

                    this.allData = newVal

                    this.getData(this.allData);

                }
            },
            immediate: true
        },

    },

    mounted() {
        setTimeout(() => {
            this.initChart();

            window.addEventListener("resize", this.screenAdapter);
            // 在页面加载完成的时候, 主动进行屏幕的适配
            this.screenAdapter();
        }, 100);
    },

    destroyed() {
        // 在组件销毁的时候, 需要将监听器取消掉
        window.removeEventListener("resize", this.screenAdapter);
    },
    methods: {
        initChart() {

            this.chartInstance = this.$echarts.init(this.$refs.echarts);
            // const standard = ['高', '中1', '初', '正常', '初', '中', '高',]
            // var a = 23.08
            // var b = 7.69
            // var c = 7.69
            // var d = 23.08
            // var e = 7.69
            // var f = 7.69
            // var g = 23.08
            // var arr = [0, a, a + b, a + b + c, a + b + c + d, a + b + c + d + e, a + b + c + d + e + f, 100]
            var option = {

                backgroundColor: '#fff',
                color: ['#FF0000', '#FF0000', '#0F870F', '#0000FF'],

                tooltip: {
                    trigger: 'axis'
                },
                title: [{
                    // text: '配方：SMA13 总重：5076kg 时间：2022-12-01 00:20:46',
                    right: '5%',
                    bottom: '18%',
                    textStyle: {
                        color: '#333',
                        fontSize: 12,
                        fontWeight: 400
                    }

                },
                {
                    text: '',
                    right: '5%',
                    bottom: '14%',
                    textStyle: {
                        color: 'red',
                        fontSize: 12,
                        fontWeight: 400
                    }

                },
                {
                    text: '',
                    right: '5%',
                    bottom: '26%',
                    textStyle: {
                        color: 'red',
                        fontSize: 12,
                        fontWeight: 400
                    }

                },
                    // {
                    //     x: "11.5%",
                    //     y: "25%",
                    //     //bottom: 100,
                    //     text: '油石比6.1%',
                    //     textStyle: {
                    //         fontWeight: 'normal',
                    //         fontSize: 12,
                    //         color: "#000"
                    //     },
                    // },
                    //  {
                    //     x: "11.5%",
                    //     y: "58%",
                    //     //bottom: 100,
                    //     text: '温度181℃',
                    //     textStyle: {
                    //         fontWeight: 'normal',
                    //         fontSize: 12,
                    //         color: "#000"
                    //     },
                    // }
                ],

                legend: {
                    data: ['上限', '下限', '中值', '目标', '当前值'],
                    textStyle: {
                        // color: '33FFFF',
                        fontSize: 14
                    },
                    itemWidth: 15,
                    itemHeight: 15,
                    itemGap: 35
                },
                grid: {
                    left: '1%',
                    right: '5%',
                    top: '16%',
                    bottom: '6%',
                    containLabel: true
                },
                toolbox: {
                    "show": false,
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisLine: {
                        lineStyle: {
                            color: '#CCCCCC'
                        }
                    },
                    axisTick: {
                        "show": false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#D5D5D5'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#DBDBDB',
                            type: 'solid',
                            width: '0.5'
                        }
                    },
                    // splitArea: {                                //网格区域
                    //     show: true                                  //是否显示
                    // },
                    data: ['0.075', '0.15', '0.3', '0.6', '1.18', '2.36', '4.75', '9.5', '13.2', '16', '19', '26.5', '31.5', '37.5']
                },
                yAxis: {
                    "axisLine": {
                        lineStyle: {
                            color: '#333'
                        }
                    },
                    name: "通过率",
                    min: 0,
                    max: 100,
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#DBDBDB',
                            type: 'solid',
                            width: '0.5'
                        }
                    },
                    "axisTick": {
                        "show": false
                    },

                    axisLabel: {
                        textStyle: {
                            color: '#333'
                        },
                        formatter: '{value}%',
                    },
                    type: 'value'
                },
                series: [
                    {
                        name: '上限',

                        type: 'line',
                        symbolSize: 6,

                        lineStyle: {

                            normal: {
                                color: '#FF0000',
                                width: 0.5,
                                type: 'dotted'

                            }
                        },

                        // data: [18, 18, 22, 25, 25, 30, 40, 77, 100, 100, 100, 100, 100, 100]
                    }, {
                        name: '下限',

                        type: 'line',
                        symbolSize: 6,
                        lineStyle: {

                            normal: {
                                color: '#FF0000',
                                width: 0.5,
                                type: 'dotted'

                            }
                        },
                        // data: [0, 5, 0, 3, 5, 10, 15, 45, 75, 100, 100, 100, 100, 100]
                    },
                    // 
                    {
                        name: '中值',

                        type: 'line',
                        symbolSize: 6,

                        lineStyle: {

                            normal: {
                                color: '#46868E',
                                width: 0.5,
                                type: 'dotted'

                            }


                        },
                        // data: [9.9, 11.3, 12.3, 13.4, 15.6, 19.9, 26.8, 57.7, 90.8, 100, 100, 100, 100, 100]
                    },
                    {
                        name: '目标',

                        type: 'line',
                        symbolSize: 6,

                        lineStyle: {

                            normal: {
                                color: '#0F870F',
                                width: 0.5,
                                type: 'dotted'

                            }


                        },
                        // data: [9.9, 11.3, 12.3, 13.4, 15.6, 19.9, 26.8, 57.7, 90.8, 100, 100, 100, 100, 100]
                    }, {
                        name: '当前值',
                        // smooth: true,
                        type: 'line',
                        symbolSize: 6,
                        symbol: 'circle',

                        itemStyle: {
                            normal: {

                                color: '#0000FF',
                                label: {
                                    show: true,
                                    position: 'top',
                                    textStyle: {
                                        color: '#0000FF',

                                    }
                                }
                            }
                        },
                        lineStyle: {

                            normal: {

                                width: 0.8,


                            }
                        },
                        // data: [8.6, 10.6, 12.7, 13.8, 16.4, 21.2, 27.8, 59.4, 91.2, 100, 100, 100, 100, 100]
                    },
                    {
                        name: '石油比',
                        type: 'gauge',
                        center: ['15%', '33%'],
                        splitNumber: 3,
                        radius: '60%',
                        startAngle: 165,
                        endAngle: 15,
                        // min: 4.45,
                        // max: 7.55,
                        pointer: {

                            length: "70%",
                            width: 3,
                            itemStyle: {
                                color: 'auto'
                            }
                        },


                        axisLine: {            // 坐标轴线
                            lineStyle: {       // 属性lineStyle控制线条样式
                                width: 10,

                            }
                        },
                        axisTick: {            // 坐标轴小标记
                            length: 14,        // 属性length控制线长
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: 'auto'
                            }
                        },
                        splitLine: {           // 分隔线
                            length: 17,         // 属性length控制线长

                            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                color: 'auto',
                                width: 2,
                            }
                        },

                        detail: {
                            formatter: function (value) {
                                var num = Math.round(value);
                                return '{bule|油石比}{bule|' + num + '}{bule|%}';
                            },
                            rich: {
                                bule: {
                                    fontSize: 12,
                                    fontFamily: 'siyuan',
                                    color: 'auto',
                                    fontWeight: '500',
                                },
                            },
                            offsetCenter: ['0%', '-30%'],
                        },

                        data: [{
                            value: 165,

                        }]
                        // detail: { show: false, formatter: '{value}%' },
                        // data: [{
                        //    value: 6.1, name: '石油比' + '6.1%', title: {
                        //       offsetCenter: [0, '-20%'], color: '#000',
                        //       fontSize: 10
                        //    }
                        // }]
                        // data: [{ value: 5, name: '健康率' }]
                    },

                    {
                        name: '温度',
                        type: 'gauge',
                        center: ['15%', '68%'],
                        radius: '60%',
                        z: 500,
                        // min: 100,
                        // max: 230,
                        startAngle: 165,
                        endAngle: 15,

                        splitNumber: 5, //刻度数量
                        pointer: {
                            length: "70%",
                            width: 3,
                            itemStyle: {
                                color: 'auto'
                            }
                        },

                        axisTick: {            // 坐标轴小标记

                            length: 14,        // 属性length控制线长
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: 'auto'
                            }
                        },
                        splitLine: {           // 分隔线

                            length: 17,         // 属性length控制线长
                            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                color: 'auto',
                                width: 2,
                            }
                        },
                        axisLine: {
                            show: true,

                            distance: 10,
                            // lineStyle: {
                            //     width: 10,
                            //     color: [
                            //         [a / 100, '#F56C6C'],
                            //         [(a + b) / 100, '#E6A23C'],
                            //         [(a + b + c) / 100, '#409eff'],
                            //         [(a + b + c + d) / 100, '#67C23A'],
                            //         [(a + b + c + d + e) / 100, '#409eff'],
                            //         [(a + b + c + d + e + f) / 100, '#E6A23C'],
                            //         [1, '#F56C6C'],
                            //     ],
                            // },
                        }, //仪表盘轴线
                        // detail: {
                        //     formatter: function (value) {
                        //         var num = Math.round(value);
                        //         return '{bule|温度}{bule|' + num + '}{bule|℃}';
                        //     },
                        //     rich: {
                        //         bule: {
                        //             fontSize: 12,
                        //             fontFamily: 'siyuan',
                        //             color: 'auto',
                        //             fontWeight: '500',
                        //         },
                        //     },
                        //     offsetCenter: ['0%', '-30%'],
                        // },

                        // data: [{
                        //     value: 165,

                        // }]
                    },
                ]
            };
            this.chartInstance.setOption(option);
        },
        getData() {


            // 级配上限
            if (this.allData.lineList.length > 0) {


                let arr1 = []
                let num1 = []
                this.allData.lineList[0].forEach(item1 => arr1.unshift(item1))
                arr1.map(item => {
                    num1.push(item)
                    // if (item != null && item != 'null' && item != '') {
                    //     num1.push(item)
                    // } else {
                    //     num1.push('0')
                    // }
                })
                // 级配下限
                let arr2 = []
                let num2 = []
                this.allData.lineList[1].forEach(item1 => arr2.unshift(item1))
                arr2.map(item => {
                    num2.push(item)
                    // if (item != null && item != 'null' && item != '') {
                    //     num2.push(item)
                    // } else {
                    //     num2.push('0')
                    // }
                })

                // 级配中限
                let arr3 = []
                let num3 = []
                this.allData.lineList[2].forEach(item1 => arr3.unshift(item1))
                arr3.map(item => {
                    num3.push(item)
                    // if (item != null && item != 'null' && item != '') {
                    //     num3.push(item)
                    // } else {
                    //     num3.push('0')
                    // }
                })
                // 目标级配
                let arr4 = []
                let num4 = []
                this.allData.lineList[3].forEach(item1 => arr4.unshift(item1))
                arr4.map(item => {
                    num4.push(item)
                    // if (item != null && item != 'null' && item != '') {
                    //     num4.push(item)
                    // } else {
                    //     num4.push('0')
                    // }
                })
                // 实际级配
                let arr5 = []
                let num5 = []
                this.allData.lineList[4].forEach(item1 => arr5.unshift(item1))
                arr5.map(item => {
                    num5.push(item)
                    // if (item != null && item != 'null' && item != '') {
                    //     num5.push(item)
                    // } else {
                    //     num5.push('0')
                    // }
                })



                var that = this

                setTimeout(() => {

                    that.updateChart(num1, num2, num3, num4, num5, this.allData.asphaltAggregate, this.allData.temperature, this.allData.fActualasphaltaggregateratio, this.allData.fMixtemperature, this.allData.formData);
                    // that.updateChart();

                }, 200)
            } else {
                that.updateChart([], [], [], [], [], {}, {}, 0, 0, {});
            }
        },
        updateChart(num1, num2, num3, num4, num5, asphaltAggregate, temperature, fActualasphaltaggregateratio, fMixtemperature, formData) {

            console.log(formData);


            // 油石比 最大值减去最小值
            var youTotal = asphaltAggregate.aggregateHigh - asphaltAggregate.aggregateLow//最大值减去最小值
            // 左侧预警 正常范围最小值减去油石比最低值
            var youLow = asphaltAggregate.aggregateLowMid - asphaltAggregate.aggregateLow
            // 正常范围 油石比正常区间最大值减去油石比正常区间最小值
            var youNormal = asphaltAggregate.aggregateHighMid - asphaltAggregate.aggregateLowMid
            // 右侧预警 油石比最高值减去 油石比正常区间最大值
            var youHigh = asphaltAggregate.aggregateHigh - asphaltAggregate.aggregateHighMid


            // var youStr = ''
            // if (asphaltAggregate.aggregateLow > fActualasphaltaggregateratio) {
            //     youStr = '油石比超标:' + fActualasphaltaggregateratio + "%"
            // }
            // else if (asphaltAggregate.aggregateLowMid > fActualasphaltaggregateratio && fActualasphaltaggregateratio >= asphaltAggregate.aggregateLow) {
            //     youStr = '油石比超标:' + fActualasphaltaggregateratio + "%"
            // } else if (asphaltAggregate.aggregateHigh >= fActualasphaltaggregateratio && fActualasphaltaggregateratio > asphaltAggregate.aggregateHighMid) {
            //     youStr = '油石比超标:' + fActualasphaltaggregateratio + "%"
            // }
            // else if (fActualasphaltaggregateratio > asphaltAggregate.aggregateHigh) {
            //     youStr = '油石比超标:' + fActualasphaltaggregateratio + "%"
            // }
            // else {
            //     youStr = ''
            // }
            // "aggregateLow": 3, // 油石比最低值                 
            // "aggregateLowMid":4, // 油石比正常区间
            // "aggregateHighMid": 5, //油石比正常区间         
            // "aggregateHigh": 6 // 油石比最高值   

            // 油石比
            // 温度 最大值减去最小值
            var temTotal = temperature.temHigh - temperature.temLow
            // 左侧高级预警
            var temLeftHigh = temperature.temLowMid1 - temperature.temLow
            //   左侧中级预警
            var temLeftMid = temperature.temLowMid2 - temperature.temLowMid1
            //   左侧初级预警
            var temLeftLow = temperature.temLowMid3 - temperature.temLowMid2
            // 正常范围 
            var temNormal = temperature.temHighMid1 - temperature.temLowMid3
            // 左侧初级预警
            var temRightHigh = temperature.temHighMid2 - temperature.temHighMid1
            //   左侧中级预警
            var temRightMid = temperature.temHighMid3 - temperature.temHighMid2
            //   左侧高级预警
            var temRightLow = temperature.temHigh - temperature.temHighMid3

            // var temStr = ''
            // var color = '#000'

            // if (temperature.temLow > fMixtemperature) {
            //     temStr = '温度超标-高级预警:' + fMixtemperature + "℃"
            //     color = '#F56C6C'
            // }
            // else if (temperature.temLowMid1 > fMixtemperature && fMixtemperature >= temperature.temLow) {
            //     temStr = '温度超标-高级预警:' + fMixtemperature + "℃"
            //     color = '#F56C6C'
            // } else if (temperature.temLowMid2 > fMixtemperature && fMixtemperature >= temperature.temLowMid1) {
            //     temStr = '温度超标-中级预警:' + fMixtemperature + "℃"
            //     color = '#E6A23C'

            // } else if (temperature.temLowMid3 > fMixtemperature && fMixtemperature >= temperature.temLowMid2) {
            //     temStr = '温度超标-初级预警:' + fMixtemperature + "℃"
            //     color = '#409eff'

            // }
            // else if (temperature.temHighMid2 >= fMixtemperature && fMixtemperature > temperature.temHighMid1) {
            //     temStr = '温度超标-初级预警:' + fMixtemperature + "℃"
            //     color = '#409eff'
            // }
            // else if (temperature.temHighMid3 >= fMixtemperature && fMixtemperature > temperature.temHighMid2) {
            //     temStr = '温度超标-中级预警:' + fMixtemperature + "℃"
            //     color = '#E6A23C'

            // }
            // else if (temperature.temHigh >= fMixtemperature && fMixtemperature > temperature.temHighMid3) {
            //     temStr = '温度超标-高级预警:' + fMixtemperature + "℃"
            //     color = '#F56C6C'

            // }
            // else if (temperature.temHigh < fMixtemperature) {
            //     temStr = '温度超标-高级预警:' + fMixtemperature + "℃"
            //     color = '#F56C6C'

            // }
            // else {
            //     temStr = ''
            // }
            // 温度
            var dataOption = {

                // title: [{
                //     text: '配方：' + formData.fMixnumber + '; 总重：' + formData.fWeight + 'kg' + '; 时间：' + formData.fDischargedates,
                //     right: '5%',
                //     bottom: '14%',
                // },
                // {
                //     text: youStr,
                //     right: '5%',
                //     bottom: '26%',
                //     textStyle: {
                //         color: '#F56C6C',

                //     }


                // },
                // {
                //     text: temStr,

                //     right: '5%',
                //     bottom: '20%',
                //     textStyle: {
                //         color: color,

                //     }


                // },

                // ],
                xAxis: {


                },
                series: [

                    {


                        data: num1
                    }, {

                        data: num2
                    },

                    {
                        data: num3
                    },
                    {

                        data: num4
                    }, {

                        data: num5
                    },
                    {
                        min: asphaltAggregate.aggregateLow,
                        max: asphaltAggregate.aggregateHigh,

                        axisLine: {            // 坐标轴线
                            lineStyle: {       // 属性lineStyle控制线条样式
                                width: 10,

                                color: [[youLow / youTotal, '#F56C6C'], [(youLow + youNormal) / youTotal, '#67C23A'], [(youLow + youNormal + youHigh) / youTotal, '#F56C6C']]
                            }
                        },

                        detail: {
                            formatter: function (value) {
                                return '{bule|油石比}{bule|' + value + '}{bule|%}';
                            },
                            rich: {
                                bule: {
                                    fontSize: 12,
                                    fontFamily: 'siyuan',
                                    color: 'auto',
                                    fontWeight: '500',
                                },
                            },
                            offsetCenter: ['0%', '-30%'],
                        },

                        data: [{
                            value: fActualasphaltaggregateratio,

                        }]
                    }, {
                        min: temperature.temLow,
                        max: temperature.temHigh,
                        axisLine: {
                            show: true,

                            distance: 10,
                            lineStyle: {
                                width: 10,
                                color: [
                                    // [temLeftHigh / temTotal, '#F56C6C'],
                                    // [(temLeftHigh + temLeftMid) / temTotal, '#E6A23C'],
                                    [(temLeftHigh + temLeftMid + temLeftLow) / temTotal, '#F56C6C'],
                                    [(temLeftHigh + temLeftMid + temLeftLow + temNormal) / temTotal, '#67C23A'],
                                    // [(temLeftHigh + temLeftMid + temLeftLow + temNormal + temRightHigh) / temTotal, '#409eff'],
                                    // [(temLeftHigh + temLeftMid + temLeftLow + temNormal + temRightHigh + temRightMid) / temTotal, '#E6A23C'],
                                    [(temLeftHigh + temLeftMid + temLeftLow + temNormal + temRightHigh + temRightMid + temRightLow) / temTotal, '#F56C6C'],
                                ],
                                // color: [
                                //     [temLeftHigh / temTotal, '#F56C6C'],
                                //     [(temLeftHigh + temLeftMid) / temTotal, '#E6A23C'],
                                //     [(temLeftHigh + temLeftMid + temLeftLow) / temTotal, '#409eff'],
                                //     [(temLeftHigh + temLeftMid + temLeftLow + temNormal) / temTotal, '#67C23A'],
                                //     [(temLeftHigh + temLeftMid + temLeftLow + temNormal + temRightHigh) / temTotal, '#409eff'],
                                //     [(temLeftHigh + temLeftMid + temLeftLow + temNormal + temRightHigh + temRightMid) / temTotal, '#E6A23C'],
                                //     [(temLeftHigh + temLeftMid + temLeftLow + temNormal + temRightHigh + temRightMid + temRightLow) / temTotal, '#F56C6C'],
                                // ],
                            },
                        }, //仪表盘轴线
                        detail: {
                            formatter: function (value) {
                                // var num = Math.round(value);
                                return '{bule|温度}{bule|' + value + '}{bule|℃}';
                            },
                            rich: {
                                bule: {
                                    fontSize: 12,
                                    fontFamily: 'siyuan',
                                    color: 'auto',
                                    fontWeight: '500',
                                },
                            },
                            offsetCenter: ['0%', '-30%'],
                        },

                        data: [{
                            value: fMixtemperature,

                        }]
                    }
                ]
            };

            this.chartInstance.setOption(dataOption);
        },
        screenAdapter() {
            const titleFontSize = (this.$refs.echarts.offsetWidth / 100);


            //   和分辨率大小相关的配置项
            const adapterOption = {
                title: [{


                    bottom: '14%',
                    textStyle: {
                        color: '#333',
                        fontSize: titleFontSize * 1.2,
                        fontWeight: 400
                    }

                },
                {
                    text: '',

                    bottom: '14%',
                    textStyle: {
                        color: 'red',
                        fontSize: titleFontSize * 1.2,

                    }

                }],

                legend: {
                    textStyle: {
                        fontSize: titleFontSize * 1.2
                    },
                    itemWidth: titleFontSize * 1.2,
                    itemHeight: titleFontSize * 1.2,
                    itemGap: titleFontSize * 2
                },
                xAxis: [{
                    axisLabel: {
                        textStyle: {
                            fontSize: titleFontSize * 1.2
                        }
                    },
                }],
                yAxis: [{
                    axisLabel: {
                        textStyle: {
                            fontSize: titleFontSize * 1.2
                        }
                    },

                }],
                // series: [{
                //     barWidth: titleFontSize * 1.717, //柱子宽
                // }, {
                //     barWidth: titleFontSize * 1.717, //柱子宽度
                // }]

            };
            this.chartInstance.setOption(adapterOption);
            // 手动的调用图表对象的resize 才能产生效果
            this.chartInstance.resize();

        },
    },
};
</script>

<style lang="less" scope></style>
